[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", 950: "#022c22", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 151 55% 42%; --primary-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 151 55% 42%; --accent-foreground: 210 40% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 151 55% 42%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 151 55% 42%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 151 55% 42%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 151 55% 42%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } html { @apply dark; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import YogaQuestionnaire from "@/components/yoga-questionnaire" export default function Home() { return (

New Member Intake Form

) } [V0_FILE]typescriptreact:file="components/yoga-questionnaire.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Card } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft, ArrowRight, Check, MousePointerClick, Fingerprint, HelpCircle, Zap } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" type QuestionType = "single-select" | "multi-select" | "text" | "email" | "tel" | "yes-no" | "optional-text" interface Question { id: string type: QuestionType question: string options?: string[] required?: boolean conditionalField?: boolean helperText?: string } export default function YogaQuestionnaire() { const questions: Question[] = [ { id: "experience", type: "single-select", question: "1. What is your yoga experience level?", options: ["Beginner", "Intermediate", "Advanced", "I've never done yoga before"], required: true, }, { id: "goals", type: "multi-select", question: "2. What are your yoga goals?", options: [ "Flexibility", "Strength", "Stress reduction", "Mindfulness", "Weight management", "Pain relief", "Better sleep", "Emotional balance", ], required: true, }, { id: "frequency", type: "single-select", question: "3. How often do you plan to practice yoga each week?", options: ["Daily", "2–3 times per week", "Once a week", "Occasionally"], required: true, }, { id: "duration", type: "single-select", question: "4. How much time do you have available for each yoga session?", options: ["5–10 minutes", "15–20 minutes", "30–45 minutes", "Around 1 hour", "More than 1 hour"], required: true, }, { id: "health", type: "multi-select", question: "5. Do you have any health concerns or physical limitations?", options: [ "Back pain", "Neck/shoulder pain", "Knee issues", "High blood pressure", "Pregnancy or postpartum", "Recent surgery or injury", "None", ], required: true, }, { id: "yogaTypes", type: "multi-select", question: "6. What types of yoga are you interested in exploring?", options: ["Hatha", "Vinyasa", "Yin", "Restorative", "Power Yoga", "Gentle Yoga", "Not sure yet"], required: true, }, { id: "pace", type: "single-select", question: "7. Do you prefer a certain pace or style of class?", options: [ "Slow and gentle", "Moderate with alignment focus", "Flow-based and energetic", "Fast-paced and challenging", "Open to exploring", ], required: true, }, { id: "adjustments", type: "single-select", question: "8. Are you comfortable with hands-on adjustments?", options: ["Yes", "Only with consent in the moment", "No", "Unsure"], required: true, }, { id: "timeOfDay", type: "multi-select", question: "9. What time(s) of day do you prefer to practice yoga?", options: ["Early morning", "Mid-morning", "Afternoon", "Evening", "Flexible"], required: true, }, { id: "activityLevel", type: "single-select", question: "10. How would you describe your current physical activity level?", options: ["Very active", "Moderately active", "Occasionally active", "Not very active"], required: true, }, { id: "specialist", type: "yes-no", question: "11. Are you currently working with a physical therapist, doctor, or other specialist?", required: true, conditionalField: true, helperText: "If yes, please specify:", }, { id: "mentalGoals", type: "optional-text", question: "12. Do you have any mental or emotional wellness goals related to your yoga practice?", required: false, helperText: "E.g., managing anxiety, building focus, emotional regulation, healing grief, etc.", }, { id: "additionalInfo", type: "optional-text", question: "13. Is there anything you'd like your instructor to know about you?", required: false, helperText: "E.g., learning style, preferences, past experience, trauma sensitivity, spiritual interests", }, { id: "referral", type: "single-select", question: "14. How did you hear about us?", options: [ "Friend or referral", "Social media", "Google/search", "Local event or flyer", "Other (please specify):", ], required: true, conditionalField: true, }, { id: "name", type: "text", question: "15. Full Name:", required: true, }, { id: "email", type: "email", question: "16. Email Address:", required: true, }, { id: "phone", type: "tel", question: "17. Phone Number:", required: false, helperText: "Optional", }, ] const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [answers, setAnswers] = useState>({}) const [conditionalAnswers, setConditionalAnswers] = useState>({}) const [direction, setDirection] = useState<"forward" | "backward">("forward") const [submitted, setSubmitted] = useState(false) const [touchStart, setTouchStart] = useState(null) const [touchEnd, setTouchEnd] = useState(null) const [showHelp, setShowHelp] = useState(false) // Refs for swipe detection const cardRef = useRef(null) const currentQuestion = questions[currentQuestionIndex] // Function to generate random answers for testing const generateRandomAnswers = () => { const randomAnswers: Record = {} const randomConditionalAnswers: Record = {} // Generate answers for each question questions.forEach((question) => { if (question.type === "single-select") { // Pick a random option const randomIndex = Math.floor(Math.random() * (question.options?.length || 1)) const selectedOption = question.options?.[randomIndex] || "" randomAnswers[question.id] = selectedOption // Handle conditional fields for "Other" in referral if (question.id === "referral" && selectedOption === "Other (please specify):") { randomConditionalAnswers[question.id] = "Found you through a local community event" } } else if (question.type === "multi-select") { // Select 1-3 random options const numSelections = Math.floor(Math.random() * 3) + 1 const selections: string[] = [] for (let i = 0; i < numSelections; i++) { if (question.options && question.options.length > 0) { const randomIndex = Math.floor(Math.random() * question.options.length) const option = question.options[randomIndex] if (!selections.includes(option)) { selections.push(option) } } } randomAnswers[question.id] = selections } else if (question.type === "yes-no") { // 30% chance of Yes, 70% chance of No const isYes = Math.random() < 0.3 randomAnswers[question.id] = isYes ? "Yes" : "No" // If Yes and has conditional field, add details if (isYes && question.conditionalField) { randomConditionalAnswers[question.id] = "Working with a physical therapist for back pain" } } else if (question.type === "text") { randomAnswers[question.id] = "John Smith" } else if (question.type === "email") { randomAnswers[question.id] = "john.smith@example.com" } else if (question.type === "tel") { randomAnswers[question.id] = "(555) 123-4567" } else if (question.type === "optional-text") { // 50% chance of providing optional text if (Math.random() > 0.5) { randomAnswers[question.id] = "I'm looking to improve my focus and reduce stress through yoga practice." } } }) // Update state with random answers setAnswers(randomAnswers) setConditionalAnswers(randomConditionalAnswers) // Submit the form setTimeout(() => { setSubmitted(true) }, 300) } // Swipe handlers const handleTouchStart = (e: React.TouchEvent) => { setTouchStart(e.targetTouches[0].clientX) } const handleTouchMove = (e: React.TouchEvent) => { setTouchEnd(e.targetTouches[0].clientX) } const handleTouchEnd = () => { if (!touchStart || !touchEnd) return const distance = touchStart - touchEnd const isLeftSwipe = distance > 50 const isRightSwipe = distance < -50 if (isLeftSwipe && currentQuestionIndex < questions.length - 1 && !isNextDisabled()) { goToNextQuestion() } if (isRightSwipe && currentQuestionIndex > 0) { goToPreviousQuestion() } setTouchStart(null) setTouchEnd(null) } const handleSingleSelect = (value: string) => { setAnswers({ ...answers, [currentQuestion.id]: value }) // Handle "Other" option for referral question if (currentQuestion.id === "referral" && value === "Other (please specify):") { // Don't auto-advance if "Other" is selected return } if (currentQuestionIndex < questions.length - 1) { setTimeout(() => { goToNextQuestion() }, 250) } } const handleMultiSelect = (option: string, checked: boolean) => { const currentSelections = answers[currentQuestion.id] || [] let newSelections if (checked) { newSelections = [...currentSelections, option] } else { newSelections = currentSelections.filter((item: string) => item !== option) } setAnswers({ ...answers, [currentQuestion.id]: newSelections }) } const handleTextInput = (value: string) => { setAnswers({ ...answers, [currentQuestion.id]: value }) } const handleConditionalInput = (questionId: string, value: string) => { setConditionalAnswers({ ...conditionalAnswers, [questionId]: value }) } const handleYesNo = (value: string) => { setAnswers({ ...answers, [currentQuestion.id]: value }) // If "No" is selected, clear any conditional answer if (value === "No") { const updatedConditionalAnswers = { ...conditionalAnswers } delete updatedConditionalAnswers[currentQuestion.id] setConditionalAnswers(updatedConditionalAnswers) // Auto-advance if "No" is selected if (currentQuestionIndex < questions.length - 1) { setTimeout(() => { goToNextQuestion() }, 250) } } } const isNextDisabled = () => { const answer = answers[currentQuestion.id] if (!currentQuestion.required) return false if (currentQuestion.type === "multi-select") { return !answer || answer.length === 0 } if (currentQuestion.type === "yes-no" && answer === "Yes" && currentQuestion.conditionalField) { return !conditionalAnswers[currentQuestion.id] } if (currentQuestion.id === "referral" && answer === "Other (please specify):") { return !conditionalAnswers[currentQuestion.id] } return !answer } const goToNextQuestion = () => { if (currentQuestionIndex < questions.length - 1) { setDirection("forward") setTimeout(() => { setCurrentQuestionIndex(currentQuestionIndex + 1) }, 150) } else { handleSubmit() } } const goToPreviousQuestion = () => { if (currentQuestionIndex > 0) { setDirection("backward") setTimeout(() => { setCurrentQuestionIndex(currentQuestionIndex - 1) }, 150) } } const handleSubmit = () => { // Combine regular answers with conditional answers const allAnswers = { ...answers } // Add conditional answers as properties Object.keys(conditionalAnswers).forEach((key) => { if (allAnswers[key] === "Yes" || allAnswers[key] === "Other (please specify):") { allAnswers[`${key}_details`] = conditionalAnswers[key] } }) // In a real application, you would send the data to your backend here console.log("Form submitted with answers:", allAnswers) setSubmitted(true) } // Animation variants const variants = { enter: (direction: string) => { return { x: direction === "forward" ? 300 : -300, opacity: 0, } }, center: { x: 0, opacity: 1, }, exit: (direction: string) => { return { x: direction === "forward" ? -300 : 300, opacity: 0, } }, } if (submitted) { return (

Welcome to Our Yoga Community! Thank you for submitting your membership application. We're excited to have you join us!

Your Membership Benefits Include:

Free introductory session with a personal yoga instructor
Access to members-only meditation workshops
10% discount on all yoga accessories in our studio shop
Monthly wellness newsletter with exclusive content

We'll be in touch shortly with your membership details and next steps. ) } return (

{/* Test button for generating random answers has been moved to the help section */}

{showHelp && ( <> {currentQuestion.type === "single-select" ? (

Select one option. The form will automatically advance to the next question.

) : currentQuestion.type === "multi-select" ? (

Select one or more options, then click the Next button to continue.

) : currentQuestion.type === "yes-no" ? (

Select Yes or No. If Yes, please provide additional details.

) : (

Enter your information, then click Next to continue.

)}

{currentQuestion.question}

{/* Single Select */} {currentQuestion.type === "single-select" && ( {currentQuestion.options?.map((option) => (

handleSingleSelect(option)} > {option} {answers[currentQuestion.id] === option && ( )}

))} )} {/* Conditional field for "Other" in referral question */} {currentQuestion.id === "referral" && answers[currentQuestion.id] === "Other (please specify):" && ( handleConditionalInput(currentQuestion.id, e.target.value)} placeholder="Please specify" className="w-full bg-slate-600 border-slate-500 text-gray-100 focus:ring-emerald-500 focus:border-emerald-500 p-4 text-lg" /> )} {currentQuestion.type === "multi-select" && (

{currentQuestion.options?.map((option) => { const currentSelections = answers[currentQuestion.id] || [] const isChecked = currentSelections.includes(option) return (

handleMultiSelect(option, !isChecked)} > handleMultiSelect(option, checked as boolean)} className="border-emerald-500 text-emerald-500 data-[state=checked]:bg-emerald-500 data-[state=checked]:text-slate-900 flex-shrink-0" onClick={(e) => e.stopPropagation()} /> { e.preventDefault() handleMultiSelect(option, !isChecked) }} > {option} {isChecked && ( )}

) })}

)} {/* Yes/No Question */} {currentQuestion.type === "yes-no" && (

handleYesNo("Yes")} > Yes {answers[currentQuestion.id] === "Yes" && ( )}

handleYesNo("No")} > No {answers[currentQuestion.id] === "No" && ( )}

)} {currentQuestion.type === "yes-no" && answers[currentQuestion.id] === "Yes" && currentQuestion.conditionalField && ( {currentQuestion.helperText} handleConditionalInput(currentQuestion.id, e.target.value)} placeholder="Please provide details" className="w-full bg-slate-600 border-slate-500 text-gray-100 focus:ring-emerald-500 focus:border-emerald-500 p-4 text-lg" /> )} {(currentQuestion.type === "text" || currentQuestion.type === "email" || currentQuestion.type === "tel") && (

{currentQuestion.helperText && (

{currentQuestion.helperText}

)} handleTextInput(e.target.value)} placeholder={ currentQuestion.type === "email" ? "your@email.com" : currentQuestion.type === "tel" ? "(123) 456-7890" : "Your answer" } className="w-full bg-slate-600 border-slate-500 text-gray-100 focus:ring-emerald-500 focus:border-emerald-500 p-5 text-lg" />

)} {currentQuestion.type === "optional-text" && (

{currentQuestion.helperText && (

{currentQuestion.helperText}

)}

handleTextInput(e.target.value)}
                    placeholder="Your answer (optional)"
                    className="w-full bg-slate-600 border-slate-500 text-gray-100 focus:ring-emerald-500 focus:border-emerald-500 p-4 text-lg min-h-[120px]"
                  />
                </div>
              )}
            </div>

<div className="flex-1 text-center text-sm text-gray-300">
                Question {currentQuestionIndex + 1} of {questions.length}
              </div>

{(currentQuestion.type === "multi-select" ||
                currentQuestion.type === "text" ||
                currentQuestion.type === "email" ||
                currentQuestion.type === "tel" ||
                currentQuestion.type === "optional-text" ||
                (currentQuestion.type === "yes-no" && answers[currentQuestion.id] === "Yes") ||
                (currentQuestion.id === "referral" && answers[currentQuestion.id] === "Other (please specify):")) && (
                <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                  <Button
                    onClick={goToNextQuestion}
                    disabled={isNextDisabled()}
                    className={`
                      flex items-center gap-1 bg-emerald-600 hover:bg-emerald-700 text-white
                      transition-all duration-200 px-5 py-2 ${
                        isNextDisabled() ? "opacity-50" : "shadow-md shadow-emerald-900/20"
                      }
                    `}
                  >
                    {currentQuestionIndex < questions.length - 1 ? (
                      <>
                        Next <ArrowRight className="h-4 w-4" />
                      </>
                    ) : (
                      "Submit"
                    )}
                  </Button>
                </motion.div>
              )}
            </div>
          </Card>
        </motion.div>
      </AnimatePresence>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from james-9405

More Templates Like This